<template>
  <view>
    <u-navbar title="个人资料" :border-bottom="false" title-size="36"></u-navbar>
    <view class="form">
      <view class="item dis-flex flex-y-between flex-y-center">
        <view class="label">头像</view>
        <view class="value">
          <u-avatar size="120" :src="userInfo.avatar"></u-avatar>
        </view>
      </view>
      <view class="item dis-flex flex-y-center flex-y-between">
        <view class="label label-box">姓名</view>
        <view class="value">
          <input placeholder="请输入姓名" class="input" v-model="userInfo.nickname" />
        </view>
      </view>
      <view class="item dis-flex flex-y-center flex-y-between">
        <view class="label label-box">公司</view>
        <view
          class="value dis-flex flex-y-center flex-y-between"
          @click="routeTo('/users/job/company-info')"
        >
          <input placeholder="请去添加公司" disabled class="input" v-model="userInfo.company" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item dis-flex flex-y-center flex-y-between">
        <view class="label label-box">职务</view>
        <view class="value">
          <input placeholder="请输入职务" class="input" v-model="userInfo.zw" />
        </view>
      </view>
    </view>
    <view class="fixed-wapper">
      <view @click="submit" class="submit-btn btn"> 确认保存 </view>
    </view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      :params="params"
      :range-key="rangeKey"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rangeKey: '',
      range: [],
      mode: 'selector',
      regionGenderList: [
        {
          gender: '男',
          value: '男'
        },
        {
          gender: '女',
          value: '女'
        }
      ],
      eduList: [
        {
          edu: '高中',
          value: '高中'
        },
        {
          edu: '大专',
          value: '大专'
        },
        {
          edu: '本科',
          value: '本科'
        },
        {
          edu: '硕士研究生',
          value: '硕士研究生'
        },
        {
          edu: '博士研究生',
          value: '博士研究生'
        }
      ],
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
        province: true,
        city: true,
        area: true,
        timestamp: true
      },
      show: false,
      userInfo: {
        nickname: '幕刃',
        avatar: '',
        gender: '男',
        birthday: '1999-09',
        address: '',
        edu: '',
        company: ''
      }
    }
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');
page {
  // padding: 30rpx 0;
  background-color: #f0f1f2;
}
.form {
  background-color: #fff;
  .item {
    padding: 35rpx 30rpx 30rpx 30rpx;
    border-bottom: 1rpx solid #dfe0e6;

    .label {
      // font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }

    .value {
      .input {
        margin: 0;
        margin-right: 10rpx;
        font-size: 30rpx;
        text-align: right;
      }
    }
  }
}
</style>
